<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-07 09:36:16
 * @LastEditors: chen_yt
 * @LastEditTime: 2022-04-06 15:56:41
 * @Description: 功能权限
 -->
<template>
  <div class="fun-container">
    <div class="left-container">
      <div class="resize-bar-vertical" />
      <div class="resize-line-vertical" />
      <div class="resize-container">
        <div v-if="multiPortal" class="left-top">
          <div class="resize-bar-horizontal" :style="leftTopStyle" />
          <fks-input
            v-model="searchValue"
            size
            clearable
            class="search-input"
            maxlength="50"
            :placeholder="LANG.SEARCH_MENU"
          >
            <fks-button slot="append" icon="fks-icon-search" />
          </fks-input>
          <div class="left-top-portal">
            {{ LANG.PORTAL }}
          </div>
          <div class="left-top-content">
            <portalSelect :show-search="false" @refresh="getMenuTree" />
          </div>
        </div>
        <div v-if="multiPortal" class="resize-line-horizontal" />

        <div class="left-bottom">
          <div class="left-bottom-menu" v-if="multiPortal">
            {{ LANG.MENU }}
          </div>
          <fks-input
            v-if="!multiPortal"
            v-model="searchValue"
            size
            clearable
            class="search-emnu-input"
            maxlength="50"
            :placeholder="LANG.SEARCH_MENU"
          >
            <fks-button slot="append" icon="fks-icon-search" />
          </fks-input>
          <div :class="['left-bottom-tree', { 'show-search': !multiPortal }]">
            <fks-tree
              :key="treeList[0] && treeList[0].id"
              ref="menuTree"
              class="menu-tree"
              highlight-current
              node-key="id"
              :default-expanded-keys="expandKey"
              :current-node-key="currentNodeKey"
              :expand-on-click-node="true"
              :data="treeList"
              :props="{
                children: 'children',
                label: 'title',
              }"
              :filter-node-method="filterNode"
              show-icon
              @node-click="handleClick"
            >
              <span slot-scope="{ data }" class="fks-tree-node__label">
                {{ LANG[data.content.title] || data.content.title }}
              </span>
            </fks-tree>
          </div>
        </div>
      </div>
    </div>
    <div class="right" :style="{ flexGrow: 1 }">
      <fun-list :menu-id="menuId" :table-name="rightTitle" />
    </div>
  </div>
</template>
<script>
import FunList from "./FunList";
import * as Auth from "./api";
import Mix from "@/mixins/module";
import { ENUM, PORTALS } from "@/store/State/stateTypes";
import { AUTH_PORTAL } from "@/store/Getter/getterTypes.js";
import portalSelect from "@/components/PortalSelect";
export default {
  name: "Function",
  components: {
    FunList,
    portalSelect,
  },
  mixins: [Mix],
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      menuId: "",
      treeList: [],
      searchValue: "",
      rightTitle: "",
      selectedIndex: 1,
      currentNode: "",
      currentNodeKey: "",
      expandKey: [],
    };
  },
  computed: {
    multiPortal() {
      return this.$store.getters.multiPortal;
    },
    portalTypes() {
      return this.$store.state[ENUM].portalType || [];
    },
    portals() {
      return this.$store.state[PORTALS];
    },
    portalList() {
      let portalList = [];
      this.portalTypes.forEach((e) => {
        let arr = this.portals.filter((p) => {
          return p.type == e.code;
        });
        if (arr && arr.length) {
          let portal = Object.assign({ list: arr }, e);
          portalList.push(portal);
        }
      });
      return portalList;
    },
    leftTopStyle() {
      let arr = [];
      arr = this.portals.filter((p) => {
        return p.type == 1;
      });
      return { height: `${(arr.length + 5) * 36}px` };
    },
    authPortal() {
      return this.$store.getters[AUTH_PORTAL] || {};
    },
  },
  watch: {
    searchValue(val) {
      this.$refs.menuTree.filter(val);
    },
  },
  mounted() {
    this.getMenuTree();
  },
  beforeDestroy() {},
  methods: {
    /**
     * @description: 刷新菜单树
     * @param {type}
     * @return:
     */
    @permission("fun:menu")
    getMenuTree() {
      this.loading = true;
      return new Promise((resolve) => {
        let params = this.authPortal;
        Auth.getMenusTree(params)
          .then((res) => {
            if (res.status && res.data) {
              this.treeList = [...res.data];
              if (!this.treeList[0].children) {
                this.menuId = this.treeList[0].id;
                this.rightTitle = this.treeList[0].content.title;
                this.currentNode = this.treeList[0].id;
                this.currentNodeKey = this.treeList[0].id;
              } else {
                this.menuId = this.treeList[0].children[0].id;
                this.rightTitle = this.treeList[0].children[0].content.title;
                this.currentNode = this.treeList[0].children[0].id;
                this.currentNodeKey = this.treeList[0].children[0].id;
                this.expandKey = [this.treeList[0].children[0].id];
              }
            } else {
              this.treeList = [];
            }
            this.loading = false;
            resolve(true);
          })
          .catch(() => {
            this.treeList = [];
            this.loading = false;
            resolve(true);
          });
      });
    },
    handleClick(node) {
      if (node.children) {
        this.$refs.menuTree.setCurrentKey(this.currentNode);
        return;
      }
      this.currentNode = node.id;
      this.menuId = node.id;
      this.rightTitle = node.content.title;
    },
    filterNode(value, data) {
      if (!value) return true;
      if (this.LANG[data.content.title]) {
        return (
          data.content.title.indexOf(value) !== -1 ||
          this.LANG[data.content.title].indexOf(value) !== -1
        );
      } else {
        //满足未配置多语言的情况
        return data.content.title.indexOf(value) !== -1;
      }
    },
  },
};
</script>
 <style rel="stylesheet/scss" lang="scss" scoped>
@import "@/assets/css/variables.scss";

.fun-container {
  display: flex;
  height: 100%;
  overflow: hidden;
  .left-container {
    position: relative;
    height: 100%;
    background-color: #fff;
    .fks-select {
      margin-bottom: 16px;
    }
    .resize-container {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 5px;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 24px 24px 24px 0;
      overflow-x: hidden;
      overflow-y: auto;
      ::-webkit-scrollbar {
        width: 0;
      }
      .fks-tree {
        overflow: auto;
      }
      .left-top {
        position: relative;
        .search-input {
          position: absolute;
          top: 0;
          left: 24px;
          width: calc(100% - 24px);
        }
        &-portal {
          position: absolute;
          top: 36px;
          left: 24px;
          width: calc(100% - 24px);
          height: 36px;
          font-weight: 600;
          font-size: 14px;
          line-height: 36px;
          color: rgb(153, 153, 153);
          cursor: auto;
        }
        .left-top-content {
          position: absolute;
          bottom: 5px;
          left: 24px;
          width: calc(100% - 24px);
          height: calc(100% - 72px);
          overflow: hidden;
          &-title {
            font-weight: 600;
            font-size: 14px;
            color: #999;
          }
        }
      }
      .left-bottom {
        position: relative;
        box-sizing: border-box;
        width: calc(100% - 24px);
        margin-bottom: 36px;
        margin-left: 24px;
        overflow: hidden;
        .show-search {
          margin-top: 12px !important;
        }
        &-menu {
          position: absolute;
          top: 0;
          height: 36px;
          font-weight: 600;
          font-size: 14px;
          line-height: 36px;
          color: rgb(153, 153, 153);
        }
        &-tree {
          position: relative;
          height: 100%;
          margin-top: 36px;
          overflow: auto;
        }
        &-title {
          margin-top: 12px;
          font-weight: 600;
          font-size: 14px;
          color: #999;
        }
        .fks-tree-node__label {
          color: #191919;
        }
      }
    }
    .resize-bar-horizontal {
      width: 300px;
      min-height: 108px; /* 最小宽度 300px */
      max-height: 600px; /* 最大宽度 600px */
      overflow: scroll;
      resize: vertical;
      opacity: 0;
    }
    .resize-bar-vertical {
      z-index: -100 !important;
      width: 300px;
      min-width: 300px; /* 最小宽度 300px */
      max-width: 600px; /* 最大宽度 600px */
      height: inherit;
      overflow: scroll;
      resize: horizontal;
      opacity: 0;
    }
    .resize-line-horizontal {
      width: 100%;
      border-bottom: 1px solid #eee;
      pointer-events: none;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        display: block;
        width: 24px;
        height: 1px;
        border-bottom: 1px solid#eee;
        cursor: ew-resize;
      }
      &::after {
        content: "";
        position: absolute;
        right: 0;
        display: block;
        width: 32px;
        height: 1px;
        border-bottom: 1px solid#eee;
      }
    }
    .resize-line-vertical {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      height: 100vh;
      border-left: 1px solid #eee;
      pointer-events: none;
    }
    .resize-bar-vertical:hover ~ .resize-line-vertical,
    .resize-bar-vertical:active ~ .resize-line-vertical {
      border-left: 1px solid #eee;
    }
    .resize-bar-horizontal::-webkit-scrollbar {
      width: 100vh;
    }
    .resize-bar-vertical::-webkit-scrollbar {
      height: 100vh;
    }
  }
  .right {
    flex: 1 1 auto;
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    background-color: #eee;
  }
}
</style>